<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue模板HTML</title>
    <script src="./js/vue.global.js"></script>
    <!-- 这里写样式 -->
    <style>
       
    </style>
</head>
<body>
    <!-- 这里填写HTML元素 -->
    <div id="app" style="text-align: center;">    
        {{ message }}
    </div>

    <script>
        // 定义一个Vue组件, 名为App
        const App = {
            // 定义组件中的数据
            data() {
                return {
                    // 以 Key:Value 方式填数据
                    message: "Hello Vue!"
                }
            },
            // 计算属性
            computed: {
            },
            // 监控变化
            watch: {
            },
            methods: {
                //这里增加函数
            }
        }
        
        // createApp 表示创建一个 Vue 应用, 存储到 app 变量中
        // 传入的参数表示，这个应用最外层的组件，应该如何展示
        // MVVM 设计模式，M -> Model 数据， V -> View 视图， VM -> ViewModel 视图数据连接层
        const vm =Vue.createApp(App)

        // 挂载到HTML元素
        vm.mount("#app") 
    </script>
</body>
</html>